<template>
	<!-- 商品属性 -->
	<view>
		<view class="flex-c" style="height: 100rpx;">
			<view class="flex-c one" style="">
				<view v-if="title ==''">注:商品属性可添加多个属性类型，多个属性项(最多10个)!</view>
				<view v-else>注:添加服务项目时，至少添加一个内容项！！！</view>
			</view>
		</view>
		<!-- {{title?'':' -->
		<view v-for="(item,index) in list" :key="index" v-if="title == '' ">
			<view class="head1  head2 bg-white" >
				<view class="title">
					<view class="text flex-cb">
						<text>添加商品属性</text>
						<view class="flex-cb">
							<view class="A" @click="handleX(index,1)">-</view>
							<view class="B" @click="handleX(index,2)">+</view>
						</view>
					</view>
				</view>
			</view>
			<view class="head1  head2 bg-white">
				<view class="title">
					<view class="text flex-cb">
						<text style="font-weight: bold;">属性类型</text>
						<view class="flex-cb">
							<view class="A" @click="handleAdd(index,1)">-</view>
							<view class="B" @click="handleAdd(index,2)">+</view>
						</view>
					</view>
					<view class="view flex-cb">
						<input type="text" placeholder="请输入属性类型" class="input" v-model="item.attribute_name" @blur="handleType(index)">
					</view>
				</view>
			</view>
			<view v-for="(i,j) in item.name" :key="j">
				<view class="head1  head2 bg-white">
					<view class="title">
						<view class="text flex-cb">
							<text>属性项</text>
						</view>
						<view class="view flex-cb">
							<input type="text" placeholder="请输入属性项" class="input" v-model="item.name[j]" @blur="handleItem(index,j)">
						</view>
					</view>
				</view>
			</view>
		</view>
		<view  v-else>
			<view class="head1  head2 bg-white" >
				<view class="title">
					<view class="text flex-cb">
						<text>添加服务项目</text>
						<view class="flex-cb">
							<view class="A" @click="handlexm(1)">-</view>
							<view class="B" @click="handlexm(2)">+</view>
						</view>
					</view>
				</view>
			</view>
			<view v-for="(i,j) in list2" :key="j" >
				<view class="head1  head2 bg-white">
					<view class="title">
						<view class="text flex-cb">
							<text>内容项</text>
						</view>
						<view class="view flex-cb">
							<!-- @blur="handleItem(index,j)" -->
							<input type="text" placeholder="请输入内容项" class="input"  v-model="i.name"  >
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="button flex-c" @click="submit">确认添加</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index:0,
				title:'',
				arr:[{attribute_name:"",name:[""]}],
				list:[
					{
						attribute_name:"",
						name:[""],
					},
				],
				list2:[
					{
						name:''
					}
				] 
				
			};
		},
		onLoad(e) {
			this.title = e.title
			uni.setNavigationBarTitle({
				title:this.title,
				
			})
		},
		onShow() {
			if(uni.getStorageSync('sex') != ''){
				this.list = uni.getStorageSync('sex')
			}
			if(uni.getStorageSync('fwxm') != ''){
				this.list2 = uni.getStorageSync('fwxm')
			}
		},
		methods:{
			handleIndex(i){
				this.index = i
				console.log(i);
			},
			handleItem(i,j){
				// console.log(i,j,this.list[i].name);
			},
			handleType(index){
				// console.log(index,this.list);
			},
			submit(){//添加
				let un = null//判断属性是否为空
				if(this.title !== '服务项目'){
					for (let i = 0; i < this.list.length; i++) {
						if(i!=0){
							if(this.list[i].attribute_name == ''){
								un = 1
							}
						}
						for (let j = 0; j < this.list[i].name.length; j++) {
							if(this.list[i].name[j] == ''){
								un = 1
							}
							if(i==0 && j == 0){un == null}
						}	
					}
					if(!un){
						uni.setStorageSync('sex',this.list)
						uni.navigateBack({
							delta:1,
							animationDuration: 500
						})
					}else{
						uni.showToast({
							icon:"none",title:'还有属性未填写，请填写或者删除'
						})
					}
				}else{
					let istrue = 0
					for (let i = 0; i < this.list2.length; i++) {
						if(this.list2[i].name == ''){
							istrue = 1
						}
					}
					if(istrue == 0){
						uni.setStorageSync('fwxm',this.list2)
						uni.navigateBack({
							delta:1,
							animationDuration: 500
						})
					}else{
						uni.showToast({
							icon:"none",title:'还有内容未填写，请填写或者删除'
						})
					}
					
				}
			},
			handleX(i,j){
				if(j==1){
					if(this.list.length == 1){
						return
					}else{
						this.list.splice(i,1)
					}
					
				}else{
					if(this.list.length !== 4){
						this.list = [...this.list,...this.arr]
					}else{
						uni.showToast({
							icon:"none",title:'不能再加了'
						})
					}
				}
			},
			handleAdd(i,j){
				if(j==1){
					// if(this.list[i].name.length == 1){
					// 	return
					// }else{
						this.list[i].name.splice(this.list[i].name.length -1,1)
					// }
					
				}else{
					if(this.list[i].name.length !== 4){
						this.list[i].name = [...this.list[i].name,...this.arr[0].name]
					}else{
						uni.showToast({
							icon:"none",title:'不能再加了'
						})
					}
				}
			},
			handlexm(i){
				if(i==1){
					if(this.list2.length == 1){
						return
					}else{
						this.list2.splice(this.list2.length - 1,1)
					}
					
				}else{
					if(this.list2.length !== 4){
						this.list2.push({name:''})
					}else{
						uni.showToast({
							icon:"none",title:'不能再加了'
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss">
.one{
	height: 60rpx;background: #d7f5eb;width: 740rpx;border-radius: 10rpx;
	// padding: 0 10rpx;
	color: #1CD699;
}
.head1{
	margin-bottom: 20rpx;
	height: auto;
}
.head2{
	min-height: 100rpx;
	padding: 0 32rpx 20rpx 36rpx;
	.title{
		// margin-top: 30rpx;
		.text{
			padding-top: 20rpx;
			height: 80rpx;
		}
		.view{
			width: 682rpx;
			height: 80rpx;
			margin-top: 20rpx;
			background: #F8F8F8;
			border-radius: 10rpx;
			padding-left: 22rpx;
			padding-right: 32rpx;
			.Price,.input{
				width: 630rpx;
			}
			.input{
				
			}
		}
		
	}
	.A,.B{
		width: 80rpx;height: 50rpx;border-radius: 10rpx;
		text-align: center;font-size: 40rpx;
	}
	.A{
		border: #e6e6e6 solid 1rpx;color: #999;margin-right: 20rpx;
	}
	.B{
		background: #d7f5eb;
		color: #1cd699;border: #1CD699 solid 1rpx;
	}
}
.button{
	width: 648rpx;
	height: 80rpx;
	background: #1CD699;
	border-radius: 10rpx;
	color: #fff;
	font-weight: bold;
	font-size: 28rpx;
	margin:80rpx auto;
}
</style>
